<template>
    <div>
        <a-row type="flex" justify="center" class="transfer">
            <a-config-provider :locale="zh_CN">
                <a-transfer
                    :target-keys="targetKeys"
                    :data-source="ruleList"
                    :titles="['可使用的规则', '已使用的规则']"
                    :render="(item) => item.title"
                    @change="transferChange"
                    @selectChange="handleSelectChange"
                    :selectedKeys="selectedKeys"
                />
            </a-config-provider>
        </a-row>
        <RuleCollapse :ruleList="ruleList" />
    </div>
</template>

<script>
    import { getRuleList } from '../../util/rules'
    import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
    import RuleCollapse from './rule-collapse.vue'
    import { readData } from '@/util/file-action'
    export default {
        name: 'Step2',
        components: { RuleCollapse },
        data() {
            return {
                ruleList: [],
                targetKeys: ['0'],
                selectedKeys: [],
                zh_CN,
                form: this.$form.createForm(this, { name: 'setCustRules' }),
                tags: [],
            }
        },
        props: {
            current: {
                type: Number,
                default: -1,
            },
        },
        watch: {
            current(nval, oval) {
                if (nval != oval) {
                    this.initRuleList()
                }
            },
        },
        mounted() {
            this.loadLocalData()
        },
        methods: {
            loadLocalData() {
                const res = readData('rule')
                if (res?.ruleList) {
                    for (const i in res?.ruleList) {
                        this.$set(this.ruleList, i, res?.ruleList[i])
                    }
                }
            },
            initRuleList() {
                const list = getRuleList()
                list.forEach((v, k) => {
                    const { key, title, description, rules } = v
                    this.$set(this.ruleList, k, {
                        key: key.toString(),
                        title,
                        description,
                        disabled: false,
                        rules,
                    })
                })
            },
            transferChange(nextTargetKeys) {
                this.targetKeys = nextTargetKeys
            },
            handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
                this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
                console.log('sourceSelectedKeys: ', sourceSelectedKeys)
                console.log('targetSelectedKeys: ', targetSelectedKeys)
            },
            addCustRules(e) {
                e.preventDefault()
                const { tags, ruleList } = this
                this.form.validateFields((err, values) => {
                    if (!err) {
                        if (tags.length > 0) {
                            const { description, title } = values
                            this.$set(ruleList, ruleList.length, {
                                key: title,
                                description,
                                title,
                                ruleList: this.tags,
                            })
                            this.form.setFieldsValue({ title: '' })
                        } else {
                            this.$message.error('过滤字段为空')
                        }
                    }
                })
            },
            delCustRules() {},
            hasErrors(fieldsError) {
                return Object.keys(fieldsError).some((field) => fieldsError[field])
            },
            addTag() {
                const ruleTag = this.form.getFieldValue('ruleTag')
                this.form.setFieldsValue({ ruleTag: '' })
                this.tags.push(ruleTag)
            },
            closeTag(k) {
                this.tags.splice(k, 1)
            },
        },
    }
</script>

<style lang="less" scoped>
    .transfer {
        margin-bottom: 20px;
    }
</style>
